<template>
  <div class="page-home">
    <a-row class="page-select" align="middle">
      <a-col flex="1 0 400px">
        <a-form
          name="basic"
          ref="selectFormRef"
          layout="inline"
          :model="selectForm"
          autocomplete="off"
        >
          <a-form-item label="姓名" name="vipName">
            <a-input v-model:value="selectForm.vipName" @pressEnter="getList" />
          </a-form-item>
          <a-form-item label="手机号码" name="vipMobile">
            <a-input v-model:value="selectForm.vipMobile" @pressEnter="getList" />
          </a-form-item>
        </a-form>
      </a-col>
      <a-col flex="0 0 168px">
        <a-button class="button-simple reset-button" @click="handleReset"> 重置 </a-button>
        <a-button
          type="primary"
          class="button-normal select-button"
          :loading="pageLoading"
          @click="getList"
        >
          查询
        </a-button>
      </a-col>
    </a-row>
    <div class="page-content">
      <div class="content-action">
        <a-button type="primary" @click="handleAddOrUpdateMember(undefined)">新增会员</a-button>
      </div>
      <div class="content-cls">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :loading="pageLoading"
          :pagination="false"
        >
          <template #emptyText>
            <empty />
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'vipSex'">
              {{ getSex(record.vipSex) }}
            </template>
            <template v-else-if="column.key === 'setting'">
              <div class="action-cls">
                <a-tooltip>
                  <template #title>消费记录</template>
                  <a-button size="small" @click="handleHistory(record)"
                    ><HistoryOutlined
                  /></a-button>
                </a-tooltip>
                <a-tooltip>
                  <template #title>会员消费</template>
                  <a-button size="small" @click="handleAddConsumption(record)"
                    ><PlusOutlined
                  /></a-button>
                </a-tooltip>
                <a-tooltip>
                  <template #title>编辑</template>
                  <a-button size="small" @click="handleAddOrUpdateMember(record)"
                    ><EditOutlined
                  /></a-button>
                </a-tooltip>
                <a-tooltip>
                  <template #title>删除</template>
                  <a-popconfirm
                    :title="`确定删除该会员（姓名: ${record.vipName}）？`"
                    placement="left"
                    @confirm="handleDelete(record.id)"
                  >
                    <template #icon><QuestionCircleOutlined style="color: red" /></template>
                    <a-button size="small" type="primary" danger ghost><DeleteOutlined /></a-button>
                  </a-popconfirm>
                </a-tooltip>
              </div>
            </template>
            <template v-else>
              {{ record[column.key] || '-' }}
            </template>
          </template>
        </a-table>
      </div>
      <div class="content-pagination">
        <pagination
          v-model:current="paginationConfig.current"
          v-model:pageSize="paginationConfig.pageSize"
          :total="paginationConfig.total"
          @paginationChange="paginationChange"
        />
      </div>
    </div>
  </div>
  <CreateModal
    v-model:createModel="createModel"
    :actionItem="actionItem"
    @createSuccess="getList"
  />
  <ConsumptionModal
    v-model:consumptionModel="consumptionModel"
    :actionItem="actionItem"
    @consumptionSuccess="getList"
  />
  <HistoryDrawer v-model:historyModel="historyModel" :actionItem="actionItem" @getList="getList" />
</template>
<script setup lang="ts" name="MemberManagement">
import type { SelectForm, TableItem } from '#/member-management'
import { deleteMemberById, getMemberList } from '@/api/member-management'
import { onMounted, reactive, ref, type Ref, type UnwrapRef } from 'vue'
import {
  DeleteOutlined,
  QuestionCircleOutlined,
  HistoryOutlined,
  PlusOutlined,
  EditOutlined
} from '@ant-design/icons-vue'
import CreateModal from './create-modal/index.vue'
import ConsumptionModal from './consumption-modal/index.vue'
import HistoryDrawer from './history-drawer/index.vue'
import { message } from 'ant-design-vue'

const selectForm: UnwrapRef<SelectForm> = reactive({
  page: 1,
  pageSize: 10,
  vipName: '',
  vipMobile: ''
})

// 搜索框
const selectFormRef = ref()
const handleReset = () => {
  selectFormRef.value.resetFields()
  getList()
}

// 表格分页
const paginationConfig = reactive({
  current: selectForm.page,
  pageSize: selectForm.pageSize,
  total: 0
})
const paginationChange = (page: number, page_size: number) => {
  selectForm.pageSize = page_size
  selectForm.page = page
  getList()
}

// 表格查询
const columns = [
  {
    title: '姓名',
    dataIndex: 'vipName',
    key: 'vipName',
    width: 100,
    ellipsis: true
  },
  {
    title: '性别',
    dataIndex: 'vipSex',
    key: 'vipSex',
    width: 100
  },
  {
    title: '手机号',
    dataIndex: 'vipMobile',
    key: 'vipMobile',
    width: 120,
    ellipsis: true
  },
  {
    title: '会员描述',
    dataIndex: 'vipDesc',
    key: 'vipDesc',
    minWidth: 300,
    ellipsis: true
  },
  {
    title: '充值日期',
    dataIndex: 'rechargeDate',
    key: 'rechargeDate',
    width: 120,
    ellipsis: true
  },
  {
    title: '总费用',
    dataIndex: 'totalMoney',
    key: 'totalMoney',
    minWidth: 250,
    ellipsis: true
  },
  {
    title: '已消费',
    dataIndex: 'totalConsumeMoney',
    key: 'totalConsumeMoney',
    minWidth: 250,
    ellipsis: true
  },
  {
    title: '剩余',
    dataIndex: 'totalRemainderMoney',
    key: 'totalRemainderMoney',
    minWidth: 250,
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'setting',
    key: 'setting',
    width: 250
  }
]
const pageLoading = ref(false)
let dataSource: Ref<TableItem[]> = ref([])
const getList = () => {
  pageLoading.value = true
  getMemberList(selectForm)
    .then((res) => {
      paginationConfig.total = res.data.total
      dataSource.value = res.data.records || []
      pageLoading.value = false
    })
    .then(() => {
      pageLoading.value = false
    })
}

const getSex = (sex: number) => {
  const sexList: any = {
    1: '男',
    2: '女'
  }
  const sexText = sexList[sex] || '-'
  return sexText
}

// 新增或编辑会员
const createModel = ref(false)
const actionItem: Ref<undefined | TableItem> = ref(undefined)
const handleAddOrUpdateMember = (_record: undefined | TableItem = undefined) => {
  createModel.value = true
  actionItem.value = _record
}

// 删除会员
const handleDelete = (id: number) => {
  deleteMemberById(id).then(() => {
    message.success('删除会员成功')
    getList()
  })
}

// 会员消费
const consumptionModel = ref(false)
const handleAddConsumption = (record: TableItem) => {
  consumptionModel.value = true
  actionItem.value = record
}

// 消费历史记录
const historyModel = ref(false)
const handleHistory = (record: TableItem) => {
  historyModel.value = true
  actionItem.value = record
}

onMounted(() => {
  getList()
})
</script>
<style lang="less" scoped>
.action-cls {
  button {
    margin-right: 16px;
  }
}
</style>
